<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 74 72"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#06F" d="M33.672 0C20.06 4.84 2.815 7.26 2.815 7.26 1.756 7.413.85 8.47.85 9.68v27.076c0 .303.454 6.202 4.386 13.009 2.27 4.084 7.11 7.714 10.891 10.89 4.69 3.933 10.437 6.958 17.092 9.076l.605.151.606-.15c6.655-2.119 12.252-5.144 16.94-9.077 3.782-3.176 8.623-6.806 10.892-10.89 4.083-6.958 4.386-12.857 4.386-13.16V9.529c0-1.058-.907-2.268-1.966-2.42-.153.152-15.127-2.269-31.01-7.109Z"/><path fill="#DAE9FF" d="M30.798 18.756c.454-1.664 2.27-2.874 3.933-2.874h4.538c1.664 0 2.42 1.21 1.815 2.723l-3.782 8.924h3.48c4.991 0 6.352 3.026 3.176 6.807l-12.1 13.916c-1.06 1.21-3.177 1.513-4.085.908l5.748-13.614h-5.294c-1.664 0-2.572-1.21-2.118-2.874l4.69-13.916Z"/><path fill="#fff" d="M27.773 18.756c.454-1.664 2.269-2.874 3.933-2.874h4.538c1.664 0 2.42 1.21 1.815 2.723l-3.782 8.924h6.505c3.327 0 4.235 2.118 2.117 4.538L28.681 48.706c-1.06 1.21-1.664 1.059-1.21-.605l3.025-12.555h-5.294c-1.664 0-2.572-1.21-2.118-2.874l4.69-13.916Z"/><path fill="#002A54" d="m72.244 67.916-1.967-1.966c1.815-2.42 2.874-5.446 2.874-8.774 0-8.168-6.655-14.823-14.974-14.823-8.32 0-14.975 6.655-14.975 14.823S49.857 72 58.176 72c3.328 0 6.353-1.21 8.774-2.874l1.966 1.966c.907.908 2.269.908 3.176 0a2.34 2.34 0 0 0 .152-3.176Z"/><path fill="#fff" d="M53 57a5 5 0 1 0 10 0 5 5 0 0 0-10 0Z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Help2 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
